<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>服务器信息</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<style type="text/css">
			/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}

			.el-divider--horizontal {
				display: block;
				height: 1px;
				width: 100%;
				margin: 8px 0px;
			}
		</style>
	</head>

	<body>
		<el-container id="app">
			<el-container>
				<el-main style="width: 100%;">
					<template>
						<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
							<!-- 服务器模块 -->
							<el-tab-pane label="服务器信息" name="first">
								<div id="auth">
									<el-row :gutter="12" style="margin: 2px;padding: 2px;">
										<el-col :span="12" style="margin: 0px;padding: 2px;">
											<el-card shadow="hover">
												<div slot="header" class="clearfix">
													<span>CPU</span>
												</div>
												<el-row style="font-weight: bold;">
													<el-col :span="20"><span>属性</span></el-col>
													<el-col :span="4"><span>值</span></el-col>
												</el-row>
												<el-divider></el-divider>
												<el-row>
													<el-col :span="20"><span>核心数</span></el-col>
													<el-col :span="4"><span>{{server.cpu.cpuNum}}个</span></el-col>
												</el-row>
												<el-row>
													<el-col :span="20"><span>用户使用率</span></el-col>
													<el-col :span="4"><span>{{server.cpu.used}}%</span></el-col>
												</el-row>
												<el-row>
													<el-col :span="20"><span>系统使用率</span></el-col>
													<el-col :span="4"><span>{{server.cpu.sys}}%</span></el-col>
												</el-row>
							  			<el-row>
													<el-col :span="20"><span>当前空闲率</span></el-col>
													<el-col :span="4"><span>{{server.cpu.free}}%</span></el-col>
												</el-row>
											</el-card>
										</el-col>
										<el-col :span="12" style="margin: 0px;padding: 2px;">
											<el-card shadow="hover">
							   		<div slot="header" class="clearfix">
													<span>内存</span>
												</div>
												<el-row style="font-weight: bold;">
													<el-col :span="12"><span>属性</span></el-col>
													<el-col :span="6"><span>内存</span></el-col>
													<el-col :span="6"><span>JVM</span></el-col>
												</el-row>
												<el-divider></el-divider>
												<el-row>
													<el-col :span="12"><span>总内存</span></el-col>
													<el-col :span="6"><span>{{server.mem.total}}GB</span></el-col>
													<el-col :span="6"><span>{{server.jvm.total}}MB</span></el-col>
												</el-row>
												<el-row>
													<el-col :span="12"><span>已用内存</span></el-col>
													<el-col :span="6"><span>{{server.mem.used}}GB</span></el-col>
							    		<el-col :span="6"><span>{{server.jvm.used}}MB</span></el-col>
												</el-row>
												<el-row>
													<el-col :span="12"><span>剩余内存</span></el-col>
													<el-col :span="6"><span>{{server.mem.free}}GB</span></el-col>
													<el-col :span="6"><span>{{server.jvm.free}}MB</span></el-col>
												</el-row>
												<el-row>
													<el-col :span="12"><span>使用率</span></el-col>
													<el-col :span="6"><span>{{server.mem.usage}}%</span></el-col>
													<el-col :span="6"><span>{{server.jvm.usage}}%</span></el-col>
												</el-row>
											</el-card>
										</el-col>
									</el-row>
									<el-row :gutter="24" style="margin: 2px;padding: 2px;">
							  	<el-col :span="24" style="margin: 2px;padding: 2px;">
							   	<el-card shadow="hover">
												<div slot="header" class="clearfix">
													<span>服务器信息</span>
												</div>
							  			<el-row style="font-weight: bold;">
													<el-col :span="6"><span>服务器名称</span></el-col>
													<el-col :span="6"><span>操作系统</span></el-col>
													<el-col :span="6"><span>服务器IP</span></el-col>
													<el-col :span="6"><span>系统架构</span></el-col>
												</el-row>
												<el-divider></el-divider>
												<el-row>
													<el-col :span="6"><span>{{server.sys.computerName}}</span></el-col>
													<el-col :span="6"><span>{{server.sys.osName}}</span></el-col>
							   			<el-col :span="6"><span>{{server.sys.computerIp}}</span></el-col>
													<el-col :span="6"><span>{{server.sys.osArch}}</span></el-col>
												</el-row>
											</el-card>
										</el-col>
									</el-row>
									<el-row :gutter="24" style="margin: 2px;padding: 2px;">
										<el-col :span="24" style="margin: 2px;padding: 2px;">
											<el-card shadow="hover">
												<div slot="header" class="clearfix">
													<span>Java虚拟机信息</span>
												</div>
												<el-row>
													<el-col :span="4" style="font-weight: bold;"><span>Java名称</span>
													</el-col>
													<el-col :span="8"><span>{{server.jvm.name}}</span></el-col>
							 					<el-col :span="4" style="font-weight: bold;"><span>Java版本</span>
													</el-col>
													<el-col :span="8"><span>{{server.jvm.version}}</span></el-col>
												</el-row>
												<el-row>
													<el-col :span="4" style="font-weight: bold;"><span>启动时间</span>
													</el-col>
													<el-col :span="8"><span>{{server.jvm.startTime}}</span></el-col>
													<el-col :span="4" style="font-weight: bold;"><span>运行时长</span>
													</el-col>
													<el-col :span="8"><span>{{server.jvm.runTime}}</span></el-col>
												</el-row>
												<el-row>
													<el-col :span="4" style="font-weight: bold;"><span>安装路径</span>
													</el-col>
													<el-col :span="8"><span>{{server.jvm.home}}</span></el-col>
													<el-col :span="4" style="font-weight: bold;"><span>项目路径</span>
													</el-col>
													<el-col :span="8"><span>{{server.sys.userDir}}</span></el-col>
												</el-row>
											</el-card>
										</el-col>
									</el-row>
									<el-row :gutter="24" style="margin: 2px;padding: 2px;">
										<el-col :span="24" style="margin: 2px;padding: 2px;">
											<el-card shadow="hover">
												<div slot="header" class="clearfix">
													<span>磁盘状态</span>
												</div>
												<el-table :data="server.sysFiles" border style="width: 100%">
													<el-table-column prop="dirName" label="盘符路径" header-align="center"
														align="center" width="180"></el-table-column>
													<el-table-column prop="sysTypeName" label="文件系统"
														header-align="center" align="center" width="180">
													</el-table-column>
													<el-table-column prop="typeName" label="盘符类型" header-align="center"
														align="center" width="250"></el-table-column>
													<el-table-column prop="total" label="总大小" header-align="center"
														align="center" width="180"></el-table-column>
													<el-table-column prop="free" label="可用大小" header-align="center"
														align="center" width="180"></el-table-column>
													<el-table-column prop="used" label="已用大小" header-align="center"
														align="center" width="180"></el-table-column>
													<el-table-column prop="usage" label="已用百分比" header-align="center"
														align="center" width="320">
														<template slot-scope="scope">
															<el-progress :text-inside="true" :stroke-width="26"
																:percentage="scope.row.usage" :format="format"
																status="exception">
															</el-progress>
														</template>
													</el-table-column>
												</el-table>
											</el-card>
										</el-col>
									</el-row>
								</div>
							</el-tab-pane>
							<!-- 错误日志信息 -->
							<el-tab-pane label="错误日志" name="second">
								<div id="ms">
									<vxe-grid border   :height="tableHeight" stripe ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source 
										@page-change="handlePageChange" size="mini" class="checkbox-table"
										:checkbox-config="{ trigger: 'row'}" :pager-config="tablePage" :data="logData"
										:header-cell-style="{'text-align':'center'}"
										:loading="tableLoading">
										<vxe-table-column type="checkbox" width="60" headerAlign="center"
											align="center"></vxe-table-column>
										<vxe-table-column type="seq" title="序号" width="60" headerAlign="center"
											align="right">
										</vxe-table-column>
										<vxe-table-column field="userId" title="操作用户" width="100" headerAlign="center"
											align="left">
										</vxe-table-column>
										<vxe-table-column field="logUserIp" title="IP地址" width="100"
											headerAlign="center" align="right">
										</vxe-table-column>
										<vxe-table-column field="logRequestTime" title="请求时间" width="150"
											headerAlign="center" align="right">
										</vxe-table-column>
										<vxe-table-column field="logUrl" title="请求地址" width="350" headerAlign="center"
											align="left">
										</vxe-table-column>
										<vxe-table-column field="errorInfo" title="错误信息" width="270"
											headerAlign="center" align="left">
										</vxe-table-column>
										<vxe-table-column field="requestData" title="请求数据" width="150"
											headerAlign="center" align="left">
										</vxe-table-column>
										<vxe-table-column field="logId" title="日志Id" width="80" headerAlign="center"
											align="right">
										</vxe-table-column>
									</vxe-grid>
								</div>
							</el-tab-pane>
						</el-tabs>
					</template>
				</el-main>
			</el-container>
		</el-container>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var main = {
				data() {
					return {
						tableHeight: '100%',
						activeName: 'second',
						server: {
							cpu: {},
							mem: {},
							jvm: {},
							sys: {},
							sysFiles: []
						},
						tablePage: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 15,
							align: 'left',
							pageSizes: [15, 30, 45, 60, 75, 90],
							layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
								'Total'
							],
						},
						logData: [],
						tableLoading: false,
						visible: false
					}
				},
				created() {
					this.findList();
				},
				mounted() {
				    this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 64;
				},
				methods: {
					//获取列表信息
					findList() {
						this.tableLoading = true;
						let params = Object.assign({
							page: this.tablePage.currentPage,
							rows: this.tablePage.pageSize,
						});
						var object = this;
						webApi("/log/listErrorLog", "post", params, function(data) {
							object.logData = data.data.rows;
							object.tablePage.total = data.data.total;
							object.tableLoading = false;
						}, function() {
							object.tableData = [];
							object.tablePage.total = 0
							object.tableLoading = false;
						});
					},
					//分页
					handlePageChange({
						currentPage,
						pageSize
					}) {
						this.tablePage.currentPage = currentPage
						this.tablePage.pageSize = pageSize
						this.findList()
					},
					format(percentage) {
				 	return percentage === 100 ? '满' : `${percentage}%`;
					},
					handleClick(tab, event) {
						const loading = this.$loading({
							lock: true,
							text: '加载中',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});
						var that = this;
						if (tab.index == "0") {
							webApi('/sys/getServer', 'get', {}, function(data) {
								if (data.code == 200) {
									that.server = data.data;
									loading.close();
								} else {
									loading.close();
									that.$XModal.message({
										message: data.msg,
										status: 'error'
									});
								}
							})
						} else if(tab.index == "1") {
							loading.close();
							this.tableLoading = false;
							this.findList();
;						}

					}

				}
			};
			var app = Vue.extend(main);
			new app().$mount('#app');
		}
	</script>

</html>
